<template>
	<view class="wrap">
		<view class="main" v-if="hasLoad">
			<view class="state-box" :class="stateStyle">
				<view class="iconfont" :class="stateIcon"></view>
				<view class="s-tit">{{state.status_text}}</view>
			</view>
			<view class="gift-view" @click="onJumpGift(state.gift_data.id)">
				<view class="b-left">
					<image :src="state.gift_data.cover_url" mode="aspectFill"></image>
				</view>
				<view class="b-main">
					<view class="b-title">{{state.gift_data.name}}</view>
					<view class="b-spec" v-if="state.gift_data.spec_data">
						<view class="s-tit">规格:</view>
						<view class="s-value">{{state.gift_data.spec_data.name}}</view>
					</view>
					<view class="b-fund">
						<view class="s-num">{{state.gift_data.order_amount}}礼币</view>
						<view class="s-worth" v-if="state.gift_data.order_worth > 0">价值 {{state.gift_data.order_worth}}元</view>
					</view>
				</view>
			</view>
			<view class="box" v-if="state.gift_data.type == 1">
				<view class="b-row">
					<view class="b-tit">领取方式</view>
					<view class="b-cont">
						<view class="s-cont s-text">{{state.gain_method == 1 ? '线下领取' : '快递邮寄'}}</view>
					</view>
				</view>
				<view class="b-row" v-if="state.gain_method == 1 && state.gift_data.offline_place">
					<view class="b-tit">领取地点</view>
					<view class="b-cont">
						<view class="s-cont s-text">{{state.gift_data.offline_place}}</view>
					</view>
				</view>
				<template v-if="state.address_data">
					<view class="b-row">
						<view class="b-tit">收货人</view>
						<view class="b-cont">
							<text class="s-name s-text">{{state.address_data.name}}</text>
							<text class="s-phone s-text">{{state.address_data.phone}}</text>
						</view>
					</view>
					<view class="b-row">
						<view class="b-tit">收件地址</view>
						<view class="b-cont">
							<view class="s-text">
								<text class="s-province">{{state.address_data.province}}</text>
								<text class="s-city">{{state.address_data.city}}</text>
								<text class="s-area">{{state.address_data.area}}</text>
								<text class="s-address">{{state.address_data.address}}</text>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="b-row">
						<view class="b-tit">收货人</view>
						<view class="b-cont">
							<text class="s-name s-text">{{state.name}}</text>
							<text class="s-phone s-text">{{state.phone}}</text>
						</view>
					</view>
				</template>
				<view class="b-row">
					<view class="b-tit">留言</view>
					<view class="b-cont">
						<text class="s-text">{{state.note}}</text>
					</view>
				</view>
				<template v-if="state.express_data">
					<view class="b-row">
						<view class="b-tit">快递公司</view>
						<view class="b-cont">
							<text class="s-text">{{state.express_data.company}}</text>
						</view>
					</view>
					<view class="b-row">
						<view class="b-tit">快递单号</view>
						<view class="b-cont">
							<text class="s-text">{{state.express_data.number}}</text>
							<text class="s-copy" @click="onCopy(state.express_data.number)">点击复制</text>
						</view>
					</view>
				</template>
				<view class="b-row" v-if="state.status == 2">
					<view class="b-tit">发货时间</view>
					<view class="b-cont">
						<text class="s-text">{{timeFormat(state.deployed_at)}}</text>
					</view>
				</view>
			</view>
			<view class="box" v-if="state.gift_data.type == 2">
				<view class="b-row">
					<view class="b-tit">券码信息</view>
					<view class="b-cont">
						<text class="s-text">{{state.gift_data.code_data.data}}</text>
						<text class="s-copy" @click="onCopy(state.gift_data.code_data.data)">点击复制</text>
					</view>
				</view>
				<view class="b-row f-link" v-if="state.gift_data.external_link">
					<view class="b-tit">兑换入口</view>
					<view class="b-cont">
						<view class="s-btn" @click="onExternalLink">点击进入</view>
					</view>
				</view>
				<view class="b-row" v-if="state.status == 2">
					<view class="b-tit">发货时间</view>
					<view class="b-cont">
						<text class="s-text">{{timeFormat(state.deployed_at)}}</text>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="b-row">
					<view class="b-tit">订单编号</view>
					<view class="b-cont">
						<text class="s-text">{{state.number}}</text>
						<text class="s-copy" @click="onCopy(state.id)">点击复制</text>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">花费礼币</view>
					<view class="b-cont">
						<text class="s-text">{{state.amount}}</text>
					</view>
				</view>
				<view class="b-row">
					<view class="b-tit">兑换时间</view>
					<view class="b-cont">
						<text class="s-text">{{timeFormat(state.created_at)}}</text>
					</view>
				</view>
			</view>

			<view class="action" v-if="submitIn">
				<view class="b-home" @click="onHome">返回首页</view>
				<view class="b-order" @click="onOrderList">我的订单</view>
			</view>

			<view class="navbar" v-if="!submitIn && state.gift_data.type == 1 
			&& (state.status == 1 || state.express_data)">
				<view class="b-action">
					<view class="b-btn f-cancel" @click="onCancel" v-if="state.status == 1">取消订单</view>
					<view class="b-btn f-feed" @click="onExpressFeed" v-if="state.express_data">物流动态</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" :top="300"></load-more>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		orderCancel
	} from '@/service/api/gift.js'
	import mixinsCommon from '@/mixins/common.js'
	import mixinsAuth from '@/mixins/auth.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				recordId: 0,
				state: null,
				hasLoad: false,
				submitIn: false,
				loadingType: 1,
				loadingText: '',

			}
		},
		onLoad(options) {
			this.loadDetail(options.id)
			this.recordId = options.id
			if (options.submit) {
				this.submitIn = true
			}
		},
		computed: {
			stateStyle() {
				return {
					'f-wait': this.state.status === 1,
					'f-done': this.state.status === 2,
					'f-cancel': this.state.status === 3,
				}
			},
			stateIcon() {
				return {
					'icon-wait': this.state.status === 1,
					'icon-done': this.state.status === 2,
					'icon-cancel': this.state.status === 3,
				}
			}
		},
		methods: {
			loadDetail(recordId) {
				getOrderDetail(recordId).then(([err, res]) => {
					console.log('getOrderDetail', err, res)
					if (!err) {
						this.hasLoad = true
						this.loadingType = -1
						this.state = res
					} else {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
				})
			},
			onExpressFeed() {
				uni.navigateTo({
					url: '/pages/gift/express_feed?id=' + this.recordId
				})
			},
			onCancel() {
				orderCancel(this.recordId).then(([err, res]) => {
					console.log('orderCancel', err, res)
					if (!err) {
						this.$logic.showToast('取消成功')
						this.loadDetail(this.recordId)
					}
				})
			},
			onExternalLink() {
				uni.navigateTo({
					url: '/pages/home/webview?url=' + encodeURIComponent(this.state.gift_data.external_link)
				})
			},
			onOrderList() {
				uni.reLaunch({
					url: '/pages/gift/order'
				})
			},
			onHome() {
				uni.reLaunch({
					url: '/pages/home/index'
				})
			},
			onJumpGift(giftId) {
				uni.navigateTo({
					url: '/pages/gift/detail?gift_id=' + giftId
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: env(safe-area-inset-bottom);
		background: $pq-bg-color;
	}

	.wrap {
		padding-bottom: 100upx;
	}

	.state-box {
		height: 180upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;

		&.f-wait {
			color: #FFC300;
		}

		&.f-done {
			color: #DA5650;
		}

		&.f-cancel {
			color: #666;
		}

		.iconfont {
			font-size: 64upx;
		}

		.s-tit {
			margin-left: 20upx;
			font-size: 50upx;
			font-weight: bold;
		}
	}

	.gift-view {
		margin-top: 30upx;
		background: #fff;
		padding: 30upx;
		display: flex;

		.b-left {
			width: 160upx;
			height: 160upx;

			image {
				width: 160upx;
				height: 160upx;
			}
		}

		.b-main {
			margin-left: 30upx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.b-title {
				font-size: 28upx;
				color: #333;
			}


			.b-spec {
				margin-top: 20upx;
				display: flex;
				align-items: center;

				.s-tit {
					font-size: 24upx;
					color: #999;
				}

				.s-value {
					margin-left: 10upx;
					font-size: 24upx;
					color: #666;
				}
			}

			.b-fund {
				margin-top: 20upx;
				display: flex;
				align-items: baseline;

				.s-num {
					font-size: 32upx;
					color: #DA5650;
				}

				.s-worth {
					margin-left: 30upx;
					font-size: 24upx;
					color: #999;
				}
			}
		}
	}

	.box {
		margin-top: 30upx;
		background: #fff;
		padding: 15upx 0;

		.b-row {
			padding: 15upx 30upx;
			display: flex;
			// justify-content: space-between;
			&.f-link {
				align-items: center;
			}

			.b-tit {
				font-size: 28upx;
				width: 180upx;
				color: #666;
			}

			.b-cont {
				width: 510upx;
				display: flex;
				align-items: center;
				font-size: 28upx;
				color: #333;
			}

			.s-copy {
				margin-left: 20upx;
				font-size: 24upx;
				color: #FFC300;
			}

			.s-province,
			.s-city,
			.s-area {
				margin-right: 10upx;
			}

			.s-phone {
				margin-left: 20upx;
			}
			
			.s-text {
				color: #333;
				font-weight: bold;
			}

			.s-btn {
				padding: 0 30upx;
				background: #FFC300;
				color: #fff;
				font-size: 24upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 30upx;
			}
		}
	}

	.action {
		margin-top: 100upx;
		display: flex;
		padding: 0 20upx;

		.b-home {
			flex: 1;
			height: 78upx;
			line-height: 78upx;
			text-align: center;
			color: #DA5650;
			font-size: 32upx;
			border: 1upx solid #DA5650;
			border-radius: 50upx;
			letter-spacing: 5upx;
		}

		.b-order {
			margin-left: 50upx;
			flex: 1;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			color: #fff;
			font-size: 32upx;
			background: #DA5650;
			border-radius: 50upx;
			letter-spacing: 5upx;
		}

	}

	.navbar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		background: #fff;
		border-top: 1upx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1upx solid #eee;

		.b-action {
			margin: 0 30upx;
			display: flex;
			align-items: center;

			.b-btn {
				margin-left: 20upx;
				background: #DA5650;
				height: 60upx;
				border-radius: 30upx;
				padding: 0 30upx;
				line-height: 60upx;
				font-size: 26upx;
				color: #fff;
				letter-spacing: 4upx;

				&.f-feed {
					color: #fff;
					background: #FFC300;
				}

				&.f-cancel {
					color: #666;
					background: none;
					border: 1upx solid #eee;
				}
			}
		}
	}
</style>
